<style>
    #fairy-sku-table .uploadimage{
        width: 56px !important;
        height: 56px !important;
    }
    .attr-left {
        border-left: solid 5px #008aff;
        font-size: 14px;
        margin-right: 10px;
        padding-left: 10px;
    }
    .attr-list {
        padding: 0 15% 0 5%;
    }
    .attr-list .layui-form-label {
        width: 280px !important;
    }
    .attr-list .layui-input-block {
        margin-left: 310px !important;
    }
    .rule-btn {
        color: #008aff;
        cursor: pointer;
        line-height: 38px;
        margin-right: 10px;
    }
    .create_variant {
        display: inline-block;
        color: #FFFFFF;
        vertical-align: middle;
        padding: 4px 6px;
        cursor: pointer;
        background-color: #1E9FFF;
        border-radius: 4px;
        margin-left: 10px;
    }
    .attr-item {
        margin: 3px 0;
    }
    .mapping-select {
        margin: 5px;
        height: 26px;
    }
    .origin-spec {
        height: 26px;
        line-height: 26px;
    }
    #attr_list_table .layui-form-selected dl {
        height: 250px; /* 设置最大高度 */
        overflow: auto; /* 超出部分可滚动 */
        min-height: 250px !important;
    }
</style>
<div class="layui-tab layui-tab-card">
    <div class="layui-tab-content" style="background-color: #F0F2F5;">
        <form action="{:sysuri()}" method="post" data-auto="true" class="layui-form layui-card" data-table-id="CollectGoods" lay-filter="goods_edit" style="background-color: #F0F2F5;">

            <div class="layui-card">
                <div class="layui-card-header">{:lang('基本信息')}</div>
                <div class="layui-card-body">
                    {if !empty($account_show) }
                    <div class="layui-form-item">
                        <label class="layui-form-label">{:lang("公司")}:</label>
                        <div class="layui-input-block">
                            <select name="account_id" class="layui-select" required lay-filter="change_account">
                                <option value="">请选择</option>
                                {if !empty($account_arr) }
                                {foreach $account_arr as $account_id => $account_name }
                                <option value="{$account_id|default=''}" {if ($shop_account == $account_id) } selected  {/if}>{$account_name|default=''}</option>
                                {/foreach}
                                {/if}
                            </select>
                        </div>
                    </div>
                    {/if}
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">{:lang('店铺')}：</label>
                        <div class="layui-input-block" >
                            <select name="shop_id" lay-verify="required">
                                <option value="">{:lang('请选择')}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">{:lang('产品标题')}：</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" placeholder="{:lang('请输入')}" autocomplete="off" class="layui-input" value="{$goods_info.title|default=''}" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">{:lang('VAT')}：</label>
                        <div class="layui-input-block" >
                            <select name="vat_type" lay-verify="required">
                                <option value="">请选择</option>
                                {if !empty($vat_list) }
                                {foreach $vat_list as $vat_id => $vat_name }
                                <option value="{$vat_id|default=0}" {if $goods_info.vat_type == $vat_id } selected {/if}>{$vat_name|default=''}</option>
                                {/foreach}
                                {/if}
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">{:lang('库存类型')}：</label>
                        <div class="layui-input-block">
                            <input type="radio" name="mode_type" value="0" title="{:lang('单品')}" {if $goods_info.mode_type == 0}checked{/if} lay-filter="change_mode_type">
                            <input type="radio" name="mode_type" value="1" title="{:lang('多变种')}" {if $goods_info.mode_type == 1}checked{/if} lay-filter="change_mode_type">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-card" style="margin-top: 10px;">
                <div class="layui-card-header">{:lang('平台分类')}</div>
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">{:lang('平台类目')}：</label>
                        <div class="layui-input-block" >
                            <input id="category_id" name="category_id" value='{$vo.category_id|default=0}' required lay-verify="required">
                        </div>
                    </div>
                    <hr>
                    <div class="layui-form-item" style="padding-left: 10px;">
                        <span class="attr-left">{:lang('属性')}</span>
                        <span>({:lang('选择平台类目后展示属性')})</span>
                    </div>
                    <div class="attr-list" id="feature_list"></div>
                </div>
            </div>

            <div class="layui-card" style="margin-top: 10px;">
                <div class="layui-card-header">{:lang('扩展信息')}</div>
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <label class="layui-form-label">SPU：</label>
                        <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" name="spu_code" autocomplete="off" class="layui-input" value="{$goods_info.spu_code|default=''}" readonly lay-verify="required">
                        </div>
<!--                        <span class="rule-btn" id="spu_rule_btn">{:lang('按规则生成')}</span>-->
                        <span style="font-style: normal;color: #949494">{:lang('可用于同一个店铺产品去重')}</span>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">{:lang('货源URL')}：</label>
                        <div class="layui-input-block" style="display: flex;">
                            <input type="text" id="source_url" name="source_url" placeholder="{:lang('请输入')}" autocomplete="off" class="layui-input" value="{$goods_info.source_url|default=''}">
                            <a href="javascript:;" style="width: 60px;font-size: 16px;line-height: 40px;" id="url_visit">&nbsp;&nbsp;{:lang('访 问')}</a>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">{:lang('ERP分类')}：</label>
                        <div class="layui-input-block">
                            <input class="layui-input" id="shop_category_id" name="shop_category_id" value="">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-card" style="margin-top: 10px;">
                <div class="layui-card-header">{:lang('产品图片')}</div>
                <div class="layui-card-body">
                    <div class="layui-form-item margin-bottom-5">
                        <div class="layui-textarea help-images">
                            <input type="hidden" value="{$goods_images|default=''}" name="goods_images">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-card" style="margin-top: 10px;{if $goods_info.mode_type == 1}display: none;{/if}" id="change_mode_type_0">
                <div class="layui-card-header">{:lang('价格&库存')}</div>
                <div class="layui-card-body">
                    <div class="layui-form-item" style="padding-left: 10px;">
                        <span class="attr-left">{:lang('价格')}</span>
                    </div>

                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label label-required-next">{:lang('货号')}：</label>
                                <div class="layui-input-block" >
                                    <input class="layui-input" name="sku[goods_nu]" value="{$sku_info.goods_nu|default=''}" placeholder="{:lang('请输入')}">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label label-required-next">{:lang('重量')}：</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" name="sku[weight]" value="{$sku_info.weight|default=''}" placeholder="{:lang('请输入')}">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label label-required-next">{:lang('价格')}：</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" name="sku[price]" value="{$sku_info.price|default=''}" placeholder="{:lang('请输入')}">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label label-required-next">{:lang('包装长度')}：</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" name="sku[length]" value="{$sku_info.length|default=''}" placeholder="{:lang('请输入')}">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label label-required-next">{:lang('原价')}：</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" name="sku[sale_price]" value="{$sku_info.sale_price|default=''}" placeholder="{:lang('请输入')}">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label label-required-next">{:lang('包装宽度')}：</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" name="sku[width]" value="{$sku_info.width|default=''}" placeholder="{:lang('请输入')}">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">{:lang('条形码')}：</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" name="sku[barcode]" value="{$sku_info.barcode|default=''}" placeholder="{:lang('请输入')}">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label label-required-next">{:lang('包装高度')}：</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" name="sku[height]" value="{$sku_info.height|default=''}" placeholder="{:lang('请输入')}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr>
                    <!-- <div class="layui-form-item" style="padding-left: 10px;">
                        <span class="attr-left">{:lang('库存')}</span>
                    </div>
                    <div class="attr-list">
                        <div class="layui-form-item">
                            <label class="layui-form-label label-required-next">{:lang('库存')}：</label>
                            <div class="layui-input-block">
                                <input class="layui-input" name="sku[stock]" value="{$sku_info.stock|default=''}" placeholder="{:lang('请输入')}">
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>

            <div class="layui-card specifications" style="margin-top: 10px;{if $goods_info.mode_type == 0}display: none;{/if}" id="change_mode_type_1">
                <div class="layui-card-header">{:lang('产品规格')}</div>
                <div class="layui-card-body">
                    <!-- sku参数表 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">{:lang('规格')}：</label>
                        <div class="layui-input-block">
                            <div id="fairy-spec-table"></div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">{:lang('属性映射')}：</label>
                        <div class="layui-input-block" id="attr_list_table"></div>
                    </div>

                    <!-- 动态sku表 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">{:lang('SKU表')}：</label>
                        <div class="layui-input-block">
                            <div id="fairy-sku-table"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-card" style="margin-top: 10px;">
                <div class="layui-card-header">{:lang('产品描述')}</div>
                <div class="layui-card-body">
                    <blockquote class="layui-elem-quote">{:lang('简单描述')}</blockquote>
                    <textarea name="short_desc" placeholder="{:lang('请输入内容')}"  rows="15" maxlength="5000" class="layui-textarea" style="white-space: nowrap;">{$vo.short_desc|default=''}</textarea>
                    <blockquote class="layui-elem-quote" style="margin-top: 10px;">{:lang('详细描述')}</blockquote>
                    <textarea name="long_desc" placeholder="{:lang('请输入内容')}" class="layui-textarea">{$vo.long_desc|default=''}</textarea>
                </div>
            </div>

            <div class="hr-line-dashed"></div>

            <div class="layui-form-item text-center">
                {if empty($account_show) }
                <input type="hidden" name="account_id" value="{$shop_account|default=0}">
                {/if}
                <input type="hidden" name="platform_id" value="{$platform_id|default=0}">
                <input type='hidden' value='{$goods_id|default=0}' name='id'>
                <button class="layui-btn" type="button" lay-submit lay-filter="submit">{:lang("保存数据")}</button>
                {if !empty($vo.id)}<button class="layui-btn layui-btn-danger" type='button' data-confirm="{:lang('确定要取消编辑吗')}" data-close>{:lang("取消编辑")}</button>{/if}
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                </div>
            </div>
        </form>
    </div>
</div>
{block name="script"}
<link rel="stylesheet" href="__ROOT__/static/plugs/layui_exts/layCascader.css">
<script>
    $(function() {
        setWidth();
    })
    // 组图组件
    $('[name=goods_images]').uploadMultipleImage();
    // 富文本组件
    // 异步加载富文本编辑器
    require(['ckeditor'], function () {
        setTimeout(function () {
            // 初始化富文本编辑器
            window.createEditor('[name=long_desc]', {height: 500});
        },500)
    });

    layui.use(['form', 'skuTable', 'layCascader', 'xmSelect'], function () {
        let form = layui.form, skuTable = layui.skuTable, xmSelect = layui.xmSelect;
        let table = layui.table;
        //注意！！！ 注意！！！ 注意！！！
        //如果配置了相关接口请求的参数，请置本示例于服务器中预览，不然会有浏览器跨域问题
        //示例中的json文件仅做格式返回参考，若多次执行添加规格后再为新增后的规格添加规格值，会发现所有新增的规格都增加了该规格值。注意！此处并非是bug，原因是因为示例中返回的新增规格值id是重复的，而在正常接口请求每次返回的新增规则id是不一样的
        let skuTable_obj = skuTable.render({
            //规格表容器id
            specTableElemId: 'fairy-spec-table',
            //sku表容器id
            skuTableElemId: 'fairy-sku-table',
            //sku索引分隔符
            skuNameDelimiter: ',',
            //sku表相同属性值是否合并行
            rowspan: true,
            //上传接口地址
            //接口要求返回格式为 {"code": 200, "data": {"url": "xxx"}, "msg": ""}
            uploadUrl: './json/upload.json',
            //添加规格接口地址，如果为空则表示不允许增加规格
            //接口要求返回格式为 {"code": 200, "data": {"id": "xxx"}, "msg": ""}
            specCreateUrl: './json/specCreate.json',
            //添加规格时的额外参数
            // specCreateParams: {goods_id : 888},
            //删除规格接口地址，如果为空则表示仅前端删除
            // specDeleteUrl: './json/specDelete.json',
            //添加规格值接口地址，如果为空则表示不允许增加规格值
            //接口要求返回格式为 {"code": 200, "data": {"id": "xxx"}, "msg": ""}
            specValueCreateUrl: './json/specValueCreate.json',
            createVariant: true, // 显示生成变种按钮
            createVariantFunc: function() { // 点击生成变种按钮的事件
                renderFeatureSpec();
            },
            //删除规格值接口地址，如果为空则表示仅前端删除
            // specValueDeleteUrl: './json/specValueDelete.json',
            //sku表格配置参数
            skuTableConfig: {
                thead: [
                    {title: '{:lang("图片")}', icon: ''},
                    {title: 'SKU', icon: ''},
                    {title: '条码', icon: ''},
                    {title: '{:lang("售价")}(CNY)', icon: 'layui-icon-cols'},
                    {title: '{:lang("原价")}(CNY)', icon: 'layui-icon-cols'},
                    // {title: '{:lang("库存")}', icon: 'layui-icon-cols'},
                    {title: '{:lang("长")}(cm)', icon: 'layui-icon-cols'},
                    {title: '{:lang("宽")}(cm)', icon: 'layui-icon-cols'},
                    {title: '{:lang("高")}(cm)', icon: 'layui-icon-cols'},
                    {title: '{:lang("重(g)")}', icon: 'layui-icon-cols'},
                ],
                tbody: [
                    {type: 'image', field: 'image', value: '', verify: '', reqtext: ''},
                    {type: 'input', field: 'goods_nu', value: '', verify: 'required', reqtext: '{:lang("sku不能为空")}'},
                    {type: 'input', field: 'barcode', value: '', reqtext: ''},
                    {type: 'input', field: 'price', value: '0', verify: 'required|number', reqtext: '{:lang("售价不能为空")}'},
                    {type: 'input', field: 'sale_price', value: '0', verify: 'required|number', reqtext: '{:lang("原价不能为空")}'},
                    // {type: 'input', field: 'stock', value: '0', verify: 'required|number', reqtext: '{:lang("库存不能为空")}'},
                    {type: 'input', field: 'length', value: '0', verify: 'number', reqtext: ''},
                    {type: 'input', field: 'width', value: '0', verify: 'number', reqtext: ''},
                    {type: 'input', field: 'height', value: '0', verify: 'number', reqtext: ''},
                    {type: 'input', field: 'weight', value: '0', verify: 'number', reqtext: ''},
                ]
            },
            //规格数据, 一般从后台获取
            specData: {$specDataTree|raw},
            //获取规格数据接口地址，如果为空或者不配置则使用 specData 参数配置
            //接口要求返回格式参考 specData.json
            // specDataUrl: './json/specData.json',
            //sku数据
            //新增的时候为空对象
            //编辑的时候可以从后台接收，会自动填充sku表，可以去掉注释看效果
            skuData: {$goods_skus_data|raw},
            //获取SKU数据接口地址，如果为空或者不配置则使用skuData配置
            //接口要求返回格式参考 skuData.json
            // skuDataUrl: './json/skuData.json',
        });

        form.on('submit(submit)', function (obj) {
            let data = obj.field;
            data.specData = skuTable_obj.getSpecData();

            // 数据验证
            if(!isNotEmpty(data.shop_id)) {
                layer.msg('{:lang("请选择店铺")}', {icon: 2});
                return false;
            }
            if(!isNotEmpty(data.title)) {
                layer.msg('{:lang("产品标题不能为空")}', {icon: 2});
                return false;
            }
            if(!isNotEmpty(data.spu_code)) {
                layer.msg('{:lang("SPU不能为空")}', {icon: 2});
                return false;
            }
            // 处理属性选择框的值
            let select_value_list = {};
            for (let i in attr_obj) {
                var select_value = attr_obj[i].getValue('valueStr');
                if(isNotEmpty(select_value)) {
                    select_value_list[i] = select_value;
                }
            }

            // 处理属性输入框的值
            let input_value_list = {};
            for (let i in attr_input_ids) {
                var input_value =  $('#select_' + attr_input_ids[i]).val();
                if(isNotEmpty(input_value)) {
                    input_value_list[attr_input_ids[i]] = input_value;
                }
            }
            data.select_value_list = select_value_list;
            data.input_value_list = input_value_list;

            httpRequest('{:url("edit")}', data, 'post', function(msg, res) {
                layer.msg(msg, {icon: 1});
                setTimeout(function() {
                    location.reload();
                }, 500)
            })
            return false
        })

        form.on('radio(change_mode_type)', function(obj) {
            if(obj.value === '1') { // 多变种
                $('#change_mode_type_1').show();
                $('#change_mode_type_0').hide();
                if(isNotEmpty(spec_mapping_list)) {
                    for (let i in spec_mapping_list) {
                        var attr_id = spec_mapping_list[i].feature_id;
                        if(spec_mapping_list[i].input_type === 0) { //输入框
                            var key = attr_input_ids.findIndex(item => item === attr_id);
                            attr_input_ids.splice(key, 1)
                        }
                        $('#select_' + attr_id).parent().parent().remove();
                    }
                }
            } else { // 单品
                $('#change_mode_type_1').hide();
                $('#change_mode_type_0').show();
                if(isNotEmpty(spec_mapping_list)) {
                    dealAttrInputHtml(spec_mapping_list);
                }
            }
        });

        // 选择平台分类
        let layCascader = layui.layCascader;
        let shop_category_data = JSON.parse('{:json_encode($shop_category_list, 320)}');
        let feature_value_obj = '{$goods_info.feature_value|raw|default=""}'
        let feature_value_data = {}
        if(isNotEmpty(feature_value_obj)){
            feature_value_data = JSON.parse(feature_value_obj)
        }
        let category_id = '{$goods_info.category_id|default=0}'; // 平台分类ID
        let shop_category_id = '{$goods_info.shop_category_id|default=0}'; // 系统分类ID

        let category_change = layCascader({
            elem:  "#category_id"
            ,placeholder: "{:lang('不选默认顶级分类')}"
            ,clearable: true
            ,value: parseInt(category_id)
            ,props: {
                value: 'id',
                label: 'title',
                children: 'children'
            }
            ,filterable: true
            ,options: []
        });

        // 请求获取平台分类
        httpRequest('{:url("getCategoryList")}', {}, 'get', function(msg, res) {
            if(!isNotEmpty(res)) {
                return false;
            }
            category_change.setOptions(res);
        });

        // 选择erp分类
        let erp_category_change = layCascader({
            elem:  "#shop_category_id"
            ,placeholder: "{:lang('不选默认顶级分类')}"
            ,clearable: true
            ,value: parseInt(shop_category_id)
            ,props: {
                value: 'id',
                label: 'title',
                children: 'children'
            }
            ,filterable: true
            ,options: shop_category_data
        });

        // 改变平台分类时触发-获取分类下的属性列表
        let attr_required_ids = []; // 必填属性id集合
        let attr_input_ids = []; // input类型的id集合
        let attr_obj = {}; // 多选框插件对象集合
        let spec_mapping_list = []; // 属性映射规格列表
        category_change.changeEvent(function (value, node) {
            let data = node.data;
            spec_mapping_list = [];
            httpRequest('{:url("getFeatureList")}', {category_id: data.id}, 'get', function(msg, res) {
                if(!isNotEmpty(res.list)) {
                    return false;
                }
                if(isNotEmpty(res.spec_list)) {
                    spec_mapping_list = res.spec_list;
                }
                attr_required_ids = [];
                let html = '';
                let select_list = [];
                for (let i in res.list) {
                    var attr_id = res.list[i].feature_id;
                    html += '<div class="layui-form-item">';
                    if(res.list[i].is_required === 1) {
                        attr_required_ids.push(attr_id);
                        html += '<label class="layui-form-label label-required-next">'+res.list[i].name+'：</label>';
                    } else {
                        html += '<label class="layui-form-label">'+res.list[i].name+'：</label>';
                    }

                    html += '<div class="layui-input-block">';
                    if(res.list[i].input_type === 1) { // 选择框
                        html += '<div id="select_'+attr_id+'"></div>';

                        var is_radio = true; // 是否单选
                        // 判断是否单选还是多选
                        if(res.list[i].is_collection === 1) { // 多选
                            is_radio = false;
                        }
                        var select_data = [];
                        if(isNotEmpty(feature_value_data[attr_id])) {
                            select_data = feature_value_data[attr_id].split(",");
                            for (let j in res.list[i].featureValue) {
                                if(select_data.indexOf((res.list[i].featureValue[j].value).toString()) !== -1) {
                                    res.list[i].featureValue[j].selected = true;
                                }
                            }
                        }

                        select_list.push({attr_id: attr_id, value: res.list[i].featureValue, is_radio: is_radio});
                    } else { // 输入框
                        attr_input_ids.push(attr_id);
                        var input_data = '';
                        if(isNotEmpty(feature_value_data[attr_id])) {
                            input_data = feature_value_data[attr_id];
                        }
                        html += '<input id="select_'+attr_id+'" type="text" class="layui-input" value="'+input_data+'">';
                    }
                    html += '</div>'
                    html += '</div>';
                }
                $('#feature_list').html(html);
                form.render();

                // 渲染多选下拉菜单
                for (let i in select_list) {
                    attr_obj[select_list[i].attr_id] = xmSelect.render({
                        el: '#select_' + select_list[i].attr_id,
                        theme: {color: '#1E9FFF'},
                        language: 'zn',
                        toolbar: {show: true},
                        filterable: true,
                        radio: select_list[i].is_radio,
                        data: select_list[i].value
                    })
                }

                // 渲染规格属性映射表格
                if(isNotEmpty(feature_data) && mode_type == 1) {
                    renderFeatureSpec();
                }

                setWidth();
                $('[name=mode_type]:checked').next().trigger('click')
            })
        });

        erp_category_change.changeEvent(function (value, node) {
            console.log(value)
            console.log(node)
        });

        $('#url_visit').on('click', function() {
            let source_url = $('#source_url').val();
            if(!isNotEmpty(source_url)) {
                return false;
            }
            window.open(source_url);
        })

        let feature_data = JSON.parse('{$feature_data|raw}'); // 商品属性特征值
        let mode_type = '{$goods_info.mode_type|default=0}';

        table.render({
            elem: '#attr_table',
            height: 200,
            page: false,
            data: [],
            cols: [[
                {field: 'origin_spec', title: '{:lang("原始规格项")}', minWidth: 180, align: 'center', templet: '#originalTpl'},
                {field: 'mapping_spec', title: '{:lang("映射属性项")}', minWidth: 90, align: 'center', templet: '#mappingTpl'},
                {field: 'origin_spec_value', title: '{:lang("原始规格值")}', minWidth: 100, align: 'center', templet: '#originalSpecTpl'},
                {field: 'mapping_spec_value', title: '{:lang("映射属性值")}', minWidth: 90, align: 'center', templet: '#mappingSpecTpl'},
            ]]
        });


        // 选择映射属性项时渲染映射属性值
        form.on('select(select_mapping_spec)', function(obj) {
            let data_index = obj.elem.dataset.index;
            let value = obj.value; // feature_id

            let mapping_list = spec_mapping_list[value].featureValue || [];
            let input_type = spec_mapping_list[value].input_type || 0;

            let mapping_spec_value_list = $('.mapping_spec_value_' + data_index)
            $.each(mapping_spec_value_list, function(k, item) {
                let html = '';
                let name = $(this).attr('name');
                if(input_type === 1) {
                    html += '<select class="layui-select mapping_spec_value_'+data_index+'" name="'+name+'" lay-search><option value="">{:lang("请选择")}</option>'
                    for (let i in mapping_list) {
                        html += '<option value="'+mapping_list[i].value+'">'+mapping_list[i].name+'</option>';
                    }
                    html += '</select>';
                } else {
                    html += '<input type="text" class="layui-input mapping_spec_value_'+data_index+'" name="'+name+'" value="">';
                }
                $(this).parent().html(html);
            })
            form.render();
        });

        let account_show = '{$account_show|default=0}';
        if (account_show == 1){
            form.on('select(change_account)', function(obj) {
                let account = obj.value;
                let f_data = form.val('goods_edit');
                getShopList(account, f_data.platform_id)
            })
        }

        let ff_data = form.val('goods_edit');
        getShopList(ff_data.account_id, ff_data.platform_id)

        // 渲染属性规格映射表格
        function renderFeatureSpec() {

            let spec_list = skuTable_obj.getSpecData(); // 规格列表
            if(!isNotEmpty(spec_list)) {
                return false;
            }
            let attr_list = [];
            for (let i in spec_list) {
                var origin_spec_value = [];
                var mapping_spec_value = [];
                for (let j in spec_list[i].child) {
                    if(spec_list[i].child[j].checked === true || spec_list[i].child[j].checked === 1) {
                        origin_spec_value.push(spec_list[i].child[j].title);
                        mapping_spec_value.push('');
                    }
                }
                attr_list.push({origin_spec: (spec_list[i].title).trim(), mapping_spec: [], origin_spec_value: origin_spec_value, mapping_spec_value: mapping_spec_value});
            }
            let html = dealAttrSpecTable(attr_list, spec_mapping_list, feature_data);
            $('#attr_list_table').html(html);
            form.render(); // 重新渲染
        }

        // 处理切换库存类型时属性的样式
        function dealAttrInputHtml(list) {
            let html = '';
            let select_list = [];
            for (let i in list) {
                var attr_id = list[i].feature_id;

                // 判断是否存在
                var info = $('#feature_list').find('#select_' + attr_id);
                if(info.length > 0) {
                    continue;
                }

                html += '<div class="layui-form-item">';
                if(list[i].is_required === 1) {
                    attr_required_ids.push(attr_id);
                    html += '<label class="layui-form-label label-required-next">'+list[i].name+'：</label>';
                } else {
                    html += '<label class="layui-form-label">'+list[i].name+'：</label>';
                }

                html += '<div class="layui-input-block">';
                if(list[i].input_type === 1) { // 选择框
                    html += '<div id="select_'+attr_id+'"></div>';

                    var is_radio = true; // 是否单选
                    // 判断是否单选还是多选
                    if(list[i].is_collection === 1) { // 多选
                        is_radio = false;
                    }
                    var select_data = [];
                    if(isNotEmpty(feature_value_data[attr_id])) {
                        select_data = feature_value_data[attr_id].split(",");
                        for (let j in list[i].featureValue) {
                            if(select_data.indexOf((list[i].featureValue[j].value).toString()) !== -1) {
                                list[i].featureValue[j].selected = true;
                            }
                        }
                    }

                    select_list.push({attr_id: attr_id, value: list[i].featureValue, is_radio: is_radio});
                } else { // 输入框
                    attr_input_ids.push(attr_id);
                    var input_data = '';
                    if(isNotEmpty(feature_value_data[attr_id])) {
                        input_data = feature_value_data[attr_id];
                    }
                    html += '<input id="select_'+attr_id+'" type="text" class="layui-input" value="'+input_data+'">';
                }
                html += '</div>';
                html += '</div>';
            }
            $('#feature_list').append(html);
            form.render();

            // 渲染多选下拉菜单
            for (let i in select_list) {
                attr_obj[select_list[i].attr_id] = xmSelect.render({
                    el: '#select_' + select_list[i].attr_id,
                    theme: {color: '#1E9FFF'},
                    language: 'zn',
                    toolbar: {show: true},
                    filterable: true,
                    radio: select_list[i].is_radio,
                    data: select_list[i].value
                })
            }
        }
    });

    // 处理属性规格映射表格样式
    function dealAttrSpecTable(data, spec_mapping_list, feature_data) {
        let html = '';
        html += '<table class="layui-table" id="attr_spec_table">\n' +
            '            <colgroup>\n' +
            '                <col>\n' +
            '                <col>\n' +
            '                <col>\n' +
            '            </colgroup>\n' +
            '            <thead>\n' +
            '            <tr>\n' +
            '                <th>原始规格项</th>\n' +
            '                <th>映射属性项</th>\n' +
            '                <th>原始规格值</th>\n' +
            '                <th>映射属性值</th>\n' +
            '            </tr>\n' +
            '            </thead>\n' +
            '            <tbody>';

        for (let i in data) {
            html += '<tr>';
            // 原始规格项
            html += '<td>'+data[i].origin_spec+'<input type="hidden" name="origin_spec['+data[i].origin_spec+']" value="'+data[i].origin_spec+'"></td>';

            // 映射属性项
            html += '<td>';
            html += '<select name="mapping_spec['+data[i].origin_spec+']" data-index="'+i+'" class="layui-select" lay-filter="select_mapping_spec">';
            html += '<option value="">请选择</option>';
            if(isNotEmpty(feature_data)) {
                var mapping_spec = feature_data.mapping_spec[data[i].origin_spec] || 0;
                for (let j in spec_mapping_list) {
                    if(mapping_spec == j) {
                        html += '<option value="'+j+'" selected>'+spec_mapping_list[j].name+'</option>';
                    } else {
                        html += '<option value="'+j+'">'+spec_mapping_list[j].name+'</option>';
                    }
                }
            } else {
                for (let j in spec_mapping_list) {
                    html += '<option value="'+j+'">'+spec_mapping_list[j].name+'</option>';
                }
            }
            html += '</select>';
            html += '</td>';

            // 原始规格值
            var origin_spec_value = data[i].origin_spec_value;
            html += '<td>';
            for (let j in origin_spec_value) {
                html += '<div class="origin-spec">'+origin_spec_value[j]+'<input type="hidden" name="origin_spec_value['+data[i].origin_spec+']['+origin_spec_value[j]+']" value="'+origin_spec_value[j]+'"></div>';
            }
            html += '</td>';

            // 映射属性值
            html += '<td>';
            if(isNotEmpty(feature_data)) {
                for (let j in origin_spec_value) {
                    var mapping_spec_value = feature_data.mapping_spec_value[data[i].origin_spec][origin_spec_value[j]] || 0;
                    var featureValue = [];
                    var input_type = 0;
                    if(isNotEmpty(spec_mapping_list[feature_data.mapping_spec[data[i].origin_spec]])){
                        featureValue = spec_mapping_list[feature_data.mapping_spec[data[i].origin_spec]].featureValue
                        input_type = spec_mapping_list[feature_data.mapping_spec[data[i].origin_spec]].input_type
                    }

                    if(input_type === 0) {
                        var str = feature_data.mapping_spec_value[data[i].origin_spec][origin_spec_value[j]] || '';
                        if(isNotEmpty(str)) {
                            html += '<div class="mapping-select"><input type="text" class="layui-input mapping_spec_value_'+i+'" name="mapping_spec_value['+data[i].origin_spec+']['+origin_spec_value[j]+']" value="'+str+'"></div>';
                        } else {
                            html += '<div class="mapping-select"><input type="text" class="layui-input mapping_spec_value_'+i+'" name="mapping_spec_value['+data[i].origin_spec+']['+origin_spec_value[j]+']" value=""></div>';
                        }
                    } else {
                        html += '<div class="mapping-select"><select class="layui-select mapping_spec_value_'+i+'" name="mapping_spec_value['+data[i].origin_spec+']['+origin_spec_value[j]+']" lay-search><option value="">请选择</option>';
                        for (let k in featureValue) {
                            if(mapping_spec_value == featureValue[k].value) {
                                html += '<option value="'+featureValue[k].value+'" selected>'+featureValue[k].name+'</option>';
                            } else {
                                html += '<option value="'+featureValue[k].value+'">'+featureValue[k].name+'</option>';
                            }
                        }
                        html += '</select></div>';
                    }
                }
            } else {
                for (let j in origin_spec_value) {
                    html += '<div class="mapping-select"><input type="text" class="layui-input mapping_spec_value_'+i+'" name="mapping_spec_value['+data[i].origin_spec+']['+origin_spec_value[j]+']" value=""></div>';
                }
            }
            html += '</td>';
            html += '</tr>';
        }
        html += '</tbody>\n' +
            '        </table>';
        return html;
    }

    // 获取店铺列表
    function getShopList(account_id = 0, platform_id = 0) {
        $.ajax({
            url: "{:sysuri('common/ajax/getShopList')}",
            type: 'post',
            data: {'account_id':account_id, 'platform_id':platform_id},
            dataType: 'json',
            success: function(res) {
                if (res.code == 1) {
                    let data = res.data;
                    let html = '<option value="">{:lang("请选择")}</option>';
                    let s_id = '{$goods_info.shop_id|default=0}';
                    for (let i = 0; i < data.length; i++) {
                        if(s_id == data[i].id){
                            html += '<option value="' + data[i].id + '" selected>' + data[i].name + '</option>';
                        }else{
                            html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                        }
                    }
                    $('select[name="shop_id"]').html(html);
                    form.render('select');
                }else{
                    $.msg.error(res.info)
                    return false;
                }
            },
            error: function(err){
                $.msg.error(err.status + err.statusText);
            }
        })
    }

    // 处理下拉菜单超出的问题
    function setWidth() {
        setTimeout(function() {
            let width_list = $('#feature_list .layui-form-item .layui-input-block');
            if(isNotEmpty(width_list) && isNotEmpty(width_list[0])) {
                let width = width_list[0].clientWidth;
                $('#feature_list .xm-option-content').width(width - 60);
            }
        }, 500)
    }

</script>
<script type="text/html" id="originalTpl">
    <div class="attr-item">
        {{d.origin_spec}}
    </div>
</script>
<script type="text/html" id="mappingTpl">
    <div class="attr-item">
        <select name="mapping_spec[{{d.LAY_NUM}}]">
            <option value="">{:lang("请选择")}</option>
            <option value="1">{:lang("每包数量，件")}</option>
            <option value="2">{:lang("一个商品中的单位")}</option>
            <option value="3">{:lang("商品颜色")}</option>
        </select>
    </div>
</script>
<script type="text/html" id="originalSpecTpl">
    {{#  layui.each(d.origin_spec_value, function(index, item){ }}
    <div class="attr-item"><input type="text" name="origin_spec_value[{{d.LAY_NUM}}][{{index}}]" class="layui-input" value="{{item}}"></div>
    {{#  }); }}
</script>
<script type="text/html" id="mappingSpecTpl">
    {{#  layui.each(d.origin_spec_value, function(index, item){ }}
    <div class="attr-item"><input type="text" name="mapping_spec_value[{{d.LAY_NUM}}][{{index}}]" class="layui-input" value="{{d.mapping_spec_value[index]}}"></div>
    {{#  }); }}
</script>
{/block}